<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getMap } from "@/api/Map/Map";

export default {
  data() {
    return {
      map: null,
      dakatime:'',
      quarm: {
        longitude: "",
        latitude: ""
      }
    };
  },
  name: "map-view",
  mounted() {
    this.initAMap();
  },

  unmounted() {
    this.map?.destroy();
    this.getMapuse();
  },
  methods: {
  // 发送param
    getMapuse() {
      getMap(this.quarm).then((res) => {
        this.dakatime = res.data;
      
          this.$emit('updateDakatime', this.dakatime); // 触发自定义事件
    
       
      });
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "bea0cc1599013a8aae769b7cd3fa15a8",
      };

      AMapLoader.load({
        key: "f4fb9c851de1e4a2d2c9f95056158e1f", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.Geolocation", "AMap.CircleEditor"], // 需要使用的的插件列表
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });

          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 20000, // 增加超时时间为20秒
            maximumAge: 0, // 定位结果缓存0毫秒，默认：0
            convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, // 显示定位按钮，默认：true
            buttonPosition: "RB", // 定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            extensions: "all", // 默认值：'base'，返回基本定位信息；'all'，无语义精化结果，返回全部定位信息
          });

          this.map.addControl(geolocation);

          geolocation.getCurrentPosition((status, result) => {
            if (status === 'complete') {
              console.log('定位成功', result);
              this.map.setCenter([result.position.lng, result.position.lat]);
              this.map.setZoom(15); // 缩放到较高精度

              this.quarm.longitude = result.position.lng;
              this.quarm.latitude = result.position.lat;
              console.log(this.quarm)
              this.getMapuse();

              // 创建一个圆对象
              const circle = new AMap.Circle({
                center: [117.377399, 39.009116], // 圆心位置
                radius: 20, // 半径
                strokeColor: "#FF33FF", // 线颜色
                strokeWeight: 6, // 线宽
                strokeOpacity: 0.2, // 线透明度
                fillOpacity: 0.4, // 填充透明度
                fillColor: "#1791fc", // 填充颜色
                zIndex: 50, // 多边形覆盖物的叠加顺序
              });

              // 将圆添加到地图上
              this.map.add(circle);

              // 创建圆形编辑器实例
              const circleEditor = new AMap.CircleEditor(this.map, circle);

              // 开启编辑模式
              circleEditor.open();

              // 监听编辑事件
              circleEditor.on('adjust', () => {
                console.log('圆被编辑');
              });
            } else {
              console.error('定位失败', result);
            }
          });
        })
        .catch((e) => {
          console.error('加载地图失败', e);
        });
    }
  }
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 400px;
  border: 1px solid red;
}
</style>